import React, { Component } from 'react'
import "../assets/styles/taba.css"
import Pageing from './Pageing'
import Model from './Model'

export default class TabA extends Component {
  state = {
    tableData: [
      {
        time: [
          "2021-01-13 17:39:42",
          "2023-01-13 17:39:42"
        ],
        useTime: [
          "2023-01-13 17:39:42",
          "2023-02-13 17:39:42"
        ],
        _id: "63919f95024a7602dc78082a",
        title: "测试优惠券",
        receiveType: "2",
        price: 300,
        state: false,
        show: false,
        system_data: true,
        create_time: "2022-12-08T08:25:57.209Z",
        imgSrc: "https://pic.616pic.com/ys_bnew_img/00/06/12/6QLoLGyq3C.jpg"
      },
      {
        time: [
          "2021-01-13 17:39:42",
          "2023-01-13 17:39:42"
        ],
        useTime: [
          "2022-01-13 17:39:42",
          "2024-01-13 17:39:42"
        ],
        _id: "63bd14c40d58511b7c6b6b18",
        title: "跨店满减",
        receiveType: "1",
        price: 300,
        state: true,
        show: true,
        create_time: "2023-01-10T07:33:24.011Z",
        imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
      },
      {
        time: [
          "2021-01-13 17:39:42",
          "2023-01-13 17:39:42"
        ],
        useTime: [
          "2022-01-13 17:39:42",
          "2024-01-13 17:39:42"
        ],
        _id: "63bd14c40d58511b7c6b6b19",
        title: "新人券",
        receiveType: "2",
        price: 300,
        state: true,
        show: true,
        create_time: "2023-01-10T07:33:24.011Z",
        imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
      },
      {
        time: [
          "2021-01-13 17:39:42",
          "2023-01-13 17:39:42"
        ],
        useTime: [
          "2022-01-13 17:39:42",
          "2024-01-13 17:39:42"
        ],
        _id: "63bd14c40d58511b7c6b6b20",
        title: "满100减20",
        receiveType: "3",
        price: 300,
        state: true,
        show: true,
        create_time: "2023-01-10T07:33:24.011Z",
        imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
      },
      {
        time: [
          "2021-01-13 17:39:42",
          "2023-01-13 17:39:42"
        ],
        useTime: [
          "2022-01-13 17:39:42",
          "2022-01-15 17:39:42"
        ],
        _id: "63bd14c40d58511b7c6b6b21",
        title: "数码产品券",
        receiveType: "1",
        price: 300,
        state: true,
        show: true,
        create_time: "2023-01-10T07:33:24.011Z",
        imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
      },
      {
        time: [
          "2021-01-13 17:39:42",
          "2023-01-13 17:39:42"
        ],
        useTime: [
          "2022-01-13 17:39:42",
          "2022-02-13 17:39:42"
        ],
        _id: "63bd14c40d58511b7c6b6b22",
        title: "跨店满减",
        receiveType: "2",
        price: 300,
        state: true,
        show: true,
        create_time: "2023-01-10T07:33:24.011Z",
        imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
      },
      {
        time: [
          "2021-01-13 17:39:42",
          "2023-01-13 17:39:42"
        ],
        useTime: [
          "2022-01-13 17:39:42",
          "2022-01-13 17:39:42"
        ],
        _id: "63bd14c40d58511b7c6b6b23",
        title: "中秋现礼券",
        receiveType: "3",
        price: 300,
        state: true,
        show: true,
        create_time: "2023-01-10T07:33:24.011Z",
        imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
      }
    ],
    //当这个两个值发生变化,计算属性获取新的数组
    searchType: "",
    searchData: "",
    currentPage: 1,
    pageSize: 3,
    visible: false,
    visible2: false,
    formData: {
      title: "满100减10",
      receiveType: "3",
      state: false,
      edu: ["bk", "zk"]
    },
    updateData:{}
  }
  /**
   * filterData计算属性名字
   */
  get filterData() {
    //searchType="title" searchData="券"
    const { searchData, searchType, tableData, currentPage, pageSize } = this.state
    return tableData.filter(item => {
      if (!searchData && !searchType) {
        return true
      } else {
        //对象的属性如果是变量,item.searchType item[searchType]
        if (item[searchType].indexOf(searchData) != -1) {
          return true
        }
      }
    })
    // const begin = (currentPage-1)*pageSize
    // const end = begin + pageSize
    // //  分页处理完成后，返回
    // return temp.slice(begin,end)
  }
  /**
   * 将优惠券类型进行转换
   * @param {} type 
   * @returns 
   */
  changeType = (type) => {
    switch (type) {
      case "1": return "新人券";
      case "2": return "通用券";
      case "3": return "门槛券";
      default:
        return "不详"
    }
  }

  /**
   * 计算日期对应天数
   * @param {*} value = ["2023-1","2022-02"]
   */
  changeTime = (value) => {
    const begin = value[0]
    const end = value[1]
    const day1 = new Date(begin)
    const day2 = new Date(end)
    const date = Math.abs(day1 - day2) / 1000 / 60 / 60 / 24
    return date + "天"
  }
  /**
   * 
   * @param {*} id 要删除的编号
   */
  deleteRowById = (id) => {
    console.log("编号:" + id);
    const { tableData } = this.state
    const index = tableData.findIndex(item => item._id == id)
    console.log(index);
    tableData.splice(index, 1)
    this.setState({
      tableData
    })
  }
  /**
   * 下拉框获取数据
   * @param {*} event 
   */
  selectChangeEvent = (event) => {
    console.log(event);
    const value = event.target.value
    console.log(value);
    this.setState({
      searchType: value
    })
  }
  /**
   * 文本框获取数据
   */
  inputChangeEvent = (event) => {
    const value = event.target.value
    this.setState({
      searchData: value
    })
  }
  typeValueEvent = (event) => {
    const value = event.target.value
    this.setState({
      searchData: value
    })
  }
  //事件函数是一个普通函数。this指向事件源
  //undefine React底层默认没有将事件绑定在button上面
  updateObj() {
    //默认this指向undefine ，外面调用我这个函数的时候，把this改变
    console.log(this);
  }
  getChildPage = (page) => {
    console.log("父组件接受：" + page);
    this.setState({
      currentPage: page
    })
  }
  getChildPageSize = (size) => {
    this.setState({
      pageSize: size
    })
  }
  closeModel = () => {
    this.setState({
      visible: false
    })
  }
  closeModel2 = () => {
    this.setState({
      visible2: false
    })
  }
  addTask = () => {
    this.setState({
      visible: true
    })
  }
  updateTask = (id) => {
    const {tableData} = this.state
    const updateData = tableData.find(item=>item._id == id)
    this.setState({
      visible2: true,
      updateData
    })
  }
  
  commonChangeEvent = (event) => {
    //获取节点
    const element = event.target
    //获取节点值
    const value = element.value
    //获取你操作的数据 字段
    const attr = element.name

    const { formData } = this.state
    if (attr == "edu") {
      if (element.checked) {
        formData.edu.push(value)
      } else {
        const index = formData.edu.findIndex(item => item == value)
        formData.edu.splice(index, 1)
      }
    } else if (attr == "state") {
      formData[attr] = JSON.parse(value)
    } else {
      formData[attr] = value
    }
    this.setState({
      formData
    })

  }

  // addObject = ()=>{
  //   const {tableData} = this.state
  //   console.log(this.state.formData);
  //   tableData.push()

  //   this.setState({
  //     tableData
  //   })
  // }

  fullUpdate = ()=>{
    //点击修改按钮，获取所有的页面表单数据。封装成对象
    console.log(this.inputElement.value);
    console.log(this.selectElement.value);
    console.log(this.radio1Element);
    console.log(this.radio2Element);
  }

  render() {
    const {
      array,
      tableData,
      searchType,
      currentPage,
      pageSize,
      visible,
      visible2,
      formData
    } = this.state
    const begin = (currentPage - 1) * pageSize
    const end = begin + pageSize
    return (
      <div className='box'>
        <div className='search'>
          <div>
            <select name="" id="" onChange={this.selectChangeEvent}>
              <option value="">请选择</option>
              <option value="title">优惠券名字</option>
              <option value="receiveType">优惠券类型</option>
            </select>
          </div>
          <div>
            {
              searchType == "receiveType" ?
                <select name="" id="" onChange={this.typeValueEvent}>
                  <option value="">请选择</option>
                  <option value="1">新人券</option>
                  <option value="2">通用券</option>
                  <option value="3">门槛券</option>
                </select> :
                <input onBlur={this.inputChangeEvent} type="text" placeholder='请输入搜索内容' />
            }
          </div>
          <div>
            <button onClick={this.addTask}>添加</button>
          </div>
        </div>
        <div className='mytable'>
          <table>
            <thead>
              <tr>
                <th>编号</th>
                <th>优惠券名称</th>
                <th>优惠券图片</th>
                <th>优惠券类型</th>
                <th>面值</th>
                <th>使用时间</th>
                <th>是否开启</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              {this.filterData.slice(begin, end).map(item => {
                return (
                  <tr key={item._id}>
                    <td>{item._id}</td>
                    <td>{item.title}</td>
                    <td>
                      <img width="40px" src={item.imgSrc} alt="" />
                    </td>
                    <td>{this.changeType(item.receiveType)}</td>
                    <td>{item.price}</td>
                    <td>{this.changeTime(item.useTime)}</td>
                    <td>{item.state ? "开启" : "关闭"}</td>
                    <td>
                      <button onClick={()=>this.updateTask(item._id)}>修改</button>
                      {/* 这段代码不能直接在浏览器运行,编译一次 <button onclick> */}
                      <button onClick={() => this.deleteRowById(item._id)}>删除</button>
                      {/* <button onclick="play"></button> */}

                    </td>
                  </tr>
                )
              })}
              {/* <tr>
                <td>001</td>
                <td>001</td>
                <td>001</td>
                <td>001</td>
                <td>001</td>
                <td>001</td>
                <td>001</td>
                <td>001</td>
              </tr> */}
            </tbody>
          </table>
        </div>
        {/*  */}
        <Pageing total={this.filterData.length} currentPage={currentPage} pageSize={pageSize} changeParentPage={this.getChildPage} changeParentPageSize={this.getChildPageSize}></Pageing>
        <Model visible={visible} title="添加优惠券" closeModel={this.closeModel}>
          <div>
            <label htmlFor="">优惠券名字：</label>
            <input name='title' value={formData.title} onChange={this.commonChangeEvent} type="text" placeholder='请输入优惠券名字' />
          </div>
          <div>
            <label htmlFor="">优惠券类型：</label>
            <select name="receiveType" id="" onChange={this.commonChangeEvent} value={formData.receiveType}>
              <option value="1">新人券</option>
              <option value="2">通用券</option>
              <option value="3">门槛券</option>
            </select>
          </div>
          <div>
            <label htmlFor="">状态：</label>
            <span>开启</span><input name='state' onChange={this.commonChangeEvent} checked={formData.state} value="true" type="radio" />
            <span>关闭</span><input name='state' onChange={this.commonChangeEvent} checked={!formData.state} value="false" type="radio" />
          </div>
          <div>
            <label htmlFor="">学历：</label>
            <span>硕士</span><input name='edu' onChange={this.commonChangeEvent} checked={formData.edu.includes("ss")} value="ss" type="checkbox" />
            <span>本科</span><input name='edu' onChange={this.commonChangeEvent} checked={formData.edu.includes("bk")} value="bk" type="checkbox" />
            <span>专科</span><input name='edu' onChange={this.commonChangeEvent} checked={formData.edu.includes("zk")} value="zk" type="checkbox" />
          </div>
          <div>
            <button onClick={this.addObject}>添加</button>
          </div>
        </Model>
        <Model visible={visible2} title="修改优惠券" closeModel={this.closeModel2}>
          <div>
            <div>
              <label htmlFor="">优惠券名字</label>
              <input ref={(element)=>this.inputElement = element} defaultValue={this.state.updateData.title} type="text" />
            </div>
            <label htmlFor="">优惠券类型</label>
            <select ref={element=>this.selectElement=element} name="" id="" defaultValue={this.state.updateData.receiveType}>
              <option value="1">新人券</option>
              <option value="2">通用券</option>
              <option value="3">门槛券</option>
            </select>
            <div>
              <label htmlFor="">状态</label>
              <input type="radio" ref={element=>this.radio1Element=element} defaultChecked={this.state.updateData.state} name='state' value="true"/>
              <input type="radio" ref={element=>this.radio2Element=element} defaultChecked={!this.state.updateData.state} name="state" value="false"/>
            </div>

            <button onClick={this.fullUpdate}>修改</button>
          </div>
        </Model>
      </div>
    )
  }
}
